<template>
  <div class="anchor" :style="menupoint.flag ? `width:9.5em` : `width:3em`">
    <div class="anchor_wraper">
      <div class="anchor_icon" @click="telescoping">
        <img
          v-show="menupoint.flag"
          :src="menupoint.trueimg"
          class="icon-fold"
        />
        <img
          v-show="!menupoint.flag"
          :src="menupoint.falseimg"
          class="icon-fold"
        />
      </div>
      <div class="anchor_wraper_ul">
        <div class="line"></div>
        <ul>
          <li
            v-for="(t, i) of anchorList"
            :key="t.id"
            :class="{
              select: menupoint.key === i,
              telescoping: !menupoint.flag,
            }"
            @click.stop="clickLi(t, i)"
          >
            <div class="anchor_item">{{ t.title }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Anchor",
  props: {
    anchorList: {
      type: Array,
      default() {
        return [];
      },
    },
    initIndex: {
      type: Number,
      default: 0,
    },
    initAnchorBox: {
      type: String,
      default: "xxxxxxxx",
    },
    initAnchorInfo: {
      type: String,
      default: "xxxxxxxx",
    },
    initAnchor: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      menupoint: {
        flag: this.initAnchor,
        trueimg:
          "",
        falseimg:
          "",
        key: this.initIndex
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 监听滚动事件
      this.$parent.$el.addEventListener("scroll", (e) => {
        this.onScroll(e);
      });
    });
  },
  destroy() {
    this.$nextTick(() => {
      // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
      this.$parent.$el.removeEventListener("scroll", this.onScroll);
    })
  },
  methods: {
    clickLi(e, i) {
      this.menupoint.key = i;
      const anchor = document.getElementsByClassName(this.initAnchorInfo)[i];
      anchor?.scrollIntoView({
        behavior: "smooth", // 平滑过渡
      });
      this.$emit("anchorCilck", e, i);
    },
    telescoping() {
      const f = !this.menupoint.flag
      this.menupoint.flag = f;
      this.$emit("anchorFlag", f);
    },
    // 滚动监听器
    onScroll(e) {
      // 获取当前文档流的 scrollTop
      // console.log(e.target.scrollHeight,'滚动条总高度');
      // console.log(e.target.scrollTop,'距顶部');
      // console.log(e.target.clientHeight,'可视区高度');
      // console.log(e.target.scrollTop + e.target.clientHeight,'距顶部 + 可视区高度');
      // 获取视窗高度
      // const domHight = e.target.offsetHeight;
      // dom滚动位置
      const scrollTop = e.target.pageYOffset || e.target.scrollTop || e.target.scrollTop;
      // // 获取所有锚点元素
      const navContents = e.target.getElementsByClassName(this.initAnchorInfo);
      // // 所有锚点元素的 offsetTop
      // const offsetTopArr = [];
      // navContents.forEach((item) => {
      //   offsetTopArr.push(item.offsetTop);
      // });
      // // // 定义当前点亮的导航下标
      let navIndex = 0;
      for (let n = 0; n < navContents.length; n++) {
        // 获取监听元素本身高度
        const scrollHeight = navContents[n].scrollHeight;
        // 获取监听元素距离视窗顶部距离
        const offsetTop = navContents[n].offsetTop - 100;
        // console.log(scrollTop,offsetTop);
        // 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
        // 则表示页面已经滚动到可视区了。
        if (scrollTop >= offsetTop && scrollTop <= offsetTop + scrollHeight) {
          navIndex = n;
        }
      }
      // 把下标赋值给 vue 的 data
      this.menupoint.key = navIndex;
    },
  },
};
</script>

<style lang="scss" scoped>
.anchor-body{
  overflow-y: auto;
  height: 100%;
}
.anchor {
  font-size: 11.2px;
  .anchor_wraper {
    position: fixed;
    right: 2em;
    top: 50%;
    transform: translateY(-50%);
    .anchor_icon {
      font-size: 1.714286em;
      margin-bottom: 0.714286em;
      .icon-fold {
        display: inline-block;
        width: 0.9em;
        cursor: pointer;
        position: relative;
        left: 1.7em;
      }
    }
    .anchor_wraper_ul {
      position: relative;
      .line {
        width: 0.071429em;
        background: #cdc7c7;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;
        right: 0.285714em;
        height: 100%;
      }
      li.select {
        background: #157edf !important;
        box-shadow: 0.071429em 0.071429em 0.714286em 0.071429em #409eff !important;
        .anchor_item {
          color: #157edf !important;
        }
      }
      li.telescoping {
        .anchor_item {
          display: none;
        }
      }
      li {
        width: 0.571429em;
        height: 0.571429em;
        background: #fff;
        border-radius: 0.857143em;
        /* border: 2px solid #9fb8f8; */
        display: flex;
        z-index: 2;
        justify-content: center;
        align-items: center;
        margin-bottom: 3.571429em;
        position: relative;
        cursor: pointer;
        background: #b1b1b1;
        box-shadow: 0.071429em 0.071429em 0.428571em 0.142857em #cccccc;
        .anchor_item {
          color: #333;
          position: absolute;
          right: 2.857143em;
          width: 8.571429em;
          text-align: right;
        }
      }
    }
  }
}
</style>
